<template>
  <div class="register flex-boxs flex-align-x-c flex-align-y-c">
      <div class="register-main bo-ra">
        <ul>
            <li class="flex-boxs">
                <label>用户名<b>*</b>:</label>
                <input type="text" v-model="username" />
            </li>
            <!-- <li class="flex-boxs">
                <label>Email:</label>
                <input type="text" />
            </li>
            <li class="flex-boxs">
                <label>手机号:</label>
                <input type="text" />
            </li> -->
            <li class="flex-boxs">
                <label>密码<b>*</b>:</label>
                <input type="password" v-model="password1" />
            </li>
            <li class="flex-boxs">
                <label>确认密码<b>*</b>:</label>
                <input type="password" v-model="password2" />
            </li>
            <li class="message">
                <p>{{ message }}</p>
            </li>
            <li>
                <button class="bm-btn-5 normal" @click="tryRegister">注册</button>
            </li>
        </ul>
      </div>
  </div>
</template>

<script>
import { apiRegister } from '@http'
export default {
    data () {
        return {
            username: null,
            password1: null,
            password2: null,
            message: null
        }
    },
    create () {

    },
    methods: {
        tryRegister () {
            if (!this.username) {
                this.message = '用户不能为空'
            }
            else if (!this.password1) {
                this.message = '密码不能为空'
            }
            else if (!this.password2) {
                this.message = '确认密码不能为空'
            }
            else if (this.password1 !== this.password2) {
                this.message = '密码不一致'
            }
            else {
                this.getRegister()
            }
        },
        getRegister () {
            let userinfo = new URLSearchParams();
            userinfo.append('username', this.username);
            userinfo.append('password', this.password1);
            apiRegister (userinfo)
                .then((response) => {
                    this.message = response.data.message;
                    if (response.data.status) {
                        this.$router.push({ path: '/login'})
                    }
                })
                .catch((error) => {
                    this.message = '请求失败'
                })
        }
    },
    watch: {
        username () {
            this.message = null
        },
        password1 () {
            this.message = null
        },
        password2 () {
            this.message = null
        }
    }
}
</script>

<style lang="less">
@import '../assets/style/base/b-gether-var.less';
.register{position:absolute; top:0; right:0; bottom:0; left:0; background:url("../assets/img/bg-1.png") no-repeat #f0f0eb; background-size:100% auto;
  .register-main{flex:0 0 80%; padding:@20px; background:rgba(255,255,255,0.9);
    li{margin-top:@15px; line-height:@40px; color:@black-01;
        &:first-child{margin-top:0;}
        label{flex:0 0 @70px; line-height:@35px;}
        b{padding:0 @3px;color:@colorC;}
        input{flex:1; height:@35px; line-height:@35px; color:@black-01; border:none; background:none;}
        button{display:block; width:@140px; margin:auto;}
    }
    .flex-boxs{border-bottom:1px solid @black-02;}
    .message{height:@15px; line-height:@15px; color:@colorC;}
  }
}
</style>